<template>
  <el-dialog v-model="props.dialogVisible" :title="title" width="30%" @close="close">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="btnOk"> 确定 </el-button>
      </span>
    </template>
    <div class="form">
      <el-form style="padding-right: 40px" :model="formData">
        <el-form-item label="渠道来源:" label-width="100px">
          <el-select placeholder="请选择" style="width: 100%" v-model="formData.channelSource">
            <el-option label="线上活动" value="线上活动"></el-option>
            <el-option label="推荐介绍" value="推荐介绍"></el-option>
            <el-option label="线下活动" value="线下活动"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动简介:" label-width="100px">
          <el-input placeholder="请输入10个字符以内" v-model="formData.actBrief"></el-input>
        </el-form-item>
        <el-form-item label="活动类型:" label-width="100px">
          <el-select placeholder="请选择" style="width: 100%" v-model="formData.courseVouchers">
            <el-option label="课堂" value="课堂"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程折扣:" label-width="100px">
          <el-input placeholder="请输入" v-model="formData.actDetail"></el-input>
        </el-form-item>
        <el-form-item label="课程代金券:" label-width="100px">
          <el-input placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" label-width="100px">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="请选择"
            size="size"
            @change="startTime"
          />
        </el-form-item>
        <el-form-item label="结束时间:" label-width="100px">
          <el-date-picker
            v-model="value2"
            type="date"
            placeholder="请选择"
            size="size"
            @change="endTime"
          />
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script setup>
import { addList, updateList } from '@/api/basicDataMaintenance.js'
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['update:dialogVisible', 'getListApi'])
const close = () => {
  formData.value.id = null
  formData.value.channelSource = ''
  formData.value.actBrief = ''
  formData.value.courseVouchers = ''
  formData.value.actDetail = ''
  formData.value.createTime = ''
  formData.value.endTime = ''
  value1.value = ''
  value2.value = ''
  emit('update:dialogVisible', false)
}
const formData = ref({
  id: null,
  channelSource: '',
  actBrief: '',
  courseVouchers: '',
  actDetail: '',
  createTime: '',
  endTime: ''
})
const value1 = ref('')
const value2 = ref('')
const startTime = () => {
  if (value1.value) {
    const date = new Date(value1.value)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    value1.value = `${year}-${'0' + month}-${day}`
  }
  formData.value.createTime = value1.value
}
const endTime = () => {
  if (value2.value) {
    const date = new Date(value2.value)
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate()
    value2.value = `${year}-${'0' + month}-${day}`
  }
  formData.value.endTime = value2.value
}
const btnOk = async () => {
  if (formData.value.id) {
    await updateList(formData.value)
    ElMessage('修改成功')
  } else {
    await addList(formData.value)

    ElMessage('新增成功')
  }
  emit('getListApi')
  close()
}
const title = computed(() => {
  return formData.value.id ? '编辑' : '新增'
})
const updataListApi = (row) => {
  formData.value.id = row.id
  formData.value.channelSource = row.channelSource
  formData.value.actBrief = row.actBrief
  formData.value.courseVouchers = row.courseVouchers
  formData.value.actDetail = row.actDetail
  value1.value = row.createTime
  value2.value = row.endTime
}
defineExpose({
  updataListApi
})
</script>
<style scoped lang="scss">
.form {
  :deep(.el-date-editor.el-input) {
    width: 100%;
    .el-input__wrapper {
      width: 100%;
    }
  }
}
</style>
